<template>
  <div class="login">
    <el-form ref="form" status-icon :model="form" :rules="rules" label-width="80px">
      <img src="../assets/avatar.jpg" alt="">
      <el-form-item label="用户名" prop='username'>
        <el-input v-model="form.username" placeholder="请输入用户名" ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
        <el-button type="" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
          { min: 3, max: 8, message: '长度在 3 到 5 个字符', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    async onSubmit () {
      try {
        await this.$refs.form.validate()
        const { meta, data } = await this.$axios.post('http://localhost:8888/api/private/v1/login', this.form)
        if (meta.status === 200) {
          this.$message.success(meta.msg)
          const token = data.token
          localStorage.setItem('token', token)
          this.$router.push('/')
        } else if (meta.status === 400) {
          this.$message.error(meta.msg)
        }
      } catch (err) {
        console.log(err)
      }
    },
    reset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

.login{
  background-color: #2d434c;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .el-form{
  width: 400px;
  padding: 20px;
  padding-top: 75px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 200px;
  border-radius: 20px;
  position: relative;
  img{
    width: 130px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -70px;
    border-radius: 50%;
    border: 5px solid #fff;
  }
  .loginBtn{
    margin-right: 80px;
  }
}
}
</style>
